<template>
  <div style="width: 83.3%;margin: 0px auto;margin-top: -5px;">
    <img class="notic-img" src="../../assets/images/swarp-fr.jpg" style="width: 100%;" />
    <a-tabs
      @contextmenu.native="e => onContextmenu(e)"
      v-if="multipage"
      :active-key="activePage"
      class="tab-layout-tabs"
      :hide-add="true"
      type="editable-card"
      @change="changePage"
      @edit="editPage"
    >
      <a-tab-pane :id="page.fullPath" :key="page.fullPath" v-for="page in pageList">
        <span slot="tab" :pagekey="page.fullPath" class="top8">{{ page.meta.title }}</span>
      </a-tab-pane>
    </a-tabs>
    <div>
      <div class="table-page-search-wrapper">
        <div>
          <a-form layout="inline">
            <know-topnav />
          </a-form>
        </div>
        <div class="knowledge-search">
          <a-form layout="inline">
            <a-row :gutter="24">
              <template>
                <a-col :md="9" :sm="12" style>
                  <el-select
                    v-model="value"
                    multiple
                    filterable
                    remote
                    reserve-keyword
                    placeholder="请输入关键词"
                    :remote-method="remoteMethod"
                    :loading="loading"
                    size="small"
                    style="width: 100%"
                  >
                    <el-option v-for="item in options" :key="item.value" :value="item.value"></el-option>
                  </el-select>

                </a-col>
              </template>
              <template>
                <div class="knowledge-classification" id="list" v-show="inneryes">
                  <a-row :gutter="24">
                    <template>
                      <a-col
                        :md="3"
                        :sm="4"
                        style=""
                        class="knowledge-classification-left"
                      >
                        <p>字母</p>
                      </a-col>
                      <a-col
                        :md="21"
                        :sm="20"
                        style=""
                        class="knowledge-classification-right"
                      >
                        <a
                          v-for="letter in enLetters"
                          :key="letter"
                          :href="`#${letter}${letter}`"
                          v-show="fuzzySearch[letter.toUpperCase()].length"
                        >{{ letter.toUpperCase() }}</a>
                      </a-col>
                    </template>
                  </a-row>
                </div>
              </template>
            </a-row>
          </a-form>
        </div>

        <div class="classification-details">
          <div v-show="!inneryes" style="text-align: center;margin-left: -200px">
            <img src="../../assets/images/zhaobudao.png" alt />
          </div>
          <div v-show="inneryes" class="classification-details-inner">
            <div class="classification-details-inner-a" id="aa" v-if="fuzzySearch.A.length != 0">
              <span>A</span>
              <li v-for="(l) in fuzzySearch.A" :key="l">
                <router-link
                  :to="`/knowledgeBase/medicationRecommendationslist/home/${l.id}`"
                  class="hover-change"
                >
                  <p>{{l.name}}</p>
                </router-link> 
              </li>
            </div>
            <div class="classification-details-inner-a" id="bb" v-if="fuzzySearch.B.length != 0">
              <span>B</span>
              <li v-for="(l) in fuzzySearch.B" :key="l">
                <router-link
                  :to="`/knowledgeBase/medicationRecommendationslist/home/${l.id}`"
                  class="hover-change"
                >
                  <p>{{l.name}}</p>
                </router-link>
              </li>
            </div>
            <div class="classification-details-inner-a" id="cc" v-if="fuzzySearch.C.length != 0">
              <span>C</span>
              <li v-for="(l) in fuzzySearch.C" :key="l">
                <router-link
                  :to="`/knowledgeBase/medicationRecommendationslist/home/${l.id}`"
                  class="hover-change"
                >
                  <p>{{l.name}}</p>
                </router-link>
              </li>
            </div>
            <div class="classification-details-inner-a" id="dd" v-if="fuzzySearch.D.length != 0">
              <span>D</span>
              <li v-for="(l) in fuzzySearch.D" :key="l">
                <router-link
                  :to="`/knowledgeBase/medicationRecommendationslist/home/${l.id}`"
                  class="hover-change"
                >
                  <p>{{l.name}}</p>
                </router-link>
              </li>
            </div>
            <div class="classification-details-inner-a" id="ee" v-if="fuzzySearch.E.length != 0">
              <span>E</span>
              <li v-for="(l) in fuzzySearch.E" :key="l">
                <router-link
                  :to="`/knowledgeBase/medicationRecommendationslist/home/${l.id}`"
                  class="hover-change"
                >
                  <p>{{l.name}}</p>
                </router-link>
              </li>
            </div>
            <div class="classification-details-inner-a" id="ff" v-if="fuzzySearch.F.length != 0">
              <span>F</span>
              <li v-for="(l) in fuzzySearch.F" :key="l">
                <router-link
                  :to="`/knowledgeBase/medicationRecommendationslist/home/${l.id}`"
                  class="hover-change"
                >
                  <p>{{l.name}}</p>
                </router-link>
              </li>
            </div>
            <div class="classification-details-inner-a" id="gg" v-if="fuzzySearch.G.length != 0">
              <span>G</span>
              <li v-for="(l) in fuzzySearch.G" :key="l">
                <router-link
                  :to="`/knowledgeBase/medicationRecommendationslist/home/${l.id}`"
                  class="hover-change"
                >
                  <p>{{l.name}}</p>
                </router-link>
              </li>
            </div>
            <div class="classification-details-inner-a" id="hh" v-if="fuzzySearch.H.length != 0">
              <span>H</span>
              <li v-for="(l) in fuzzySearch.H" :key="l">
                <router-link
                  :to="`/knowledgeBase/medicationRecommendationslist/home/${l.id}`"
                  class="hover-change"
                >
                  <p>{{l.name}}</p>
                </router-link>
              </li>
            </div>
            <div class="classification-details-inner-a" id="jj" v-if="fuzzySearch.J.length != 0">
              <span>J</span>
              <li v-for="(l) in fuzzySearch.J" :key="l">
                <router-link
                  :to="`/knowledgeBase/medicationRecommendationslist/home/${l.id}`"
                  class="hover-change"
                >
                  <p>{{l.name}}</p>
                </router-link>
              </li>
            </div>
            <div class="classification-details-inner-a" id="kk" v-if="fuzzySearch.K.length != 0">
              <span>K</span>
              <li v-for="(l) in fuzzySearch.K" :key="l">
                <router-link
                  :to="`/knowledgeBase/medicationRecommendationslist/home/${l.id}`"
                  class="hover-change"
                >
                  <p>{{l.name}}</p>
                </router-link>
              </li>
            </div>
            <div class="classification-details-inner-a" id="ll" v-if="fuzzySearch.L.length != 0">
              <span>L</span>
              <li v-for="(l) in fuzzySearch.L" :key="l">
                <router-link
                  :to="`/knowledgeBase/medicationRecommendationslist/home/${l.id}`"
                  class="hover-change"
                >
                  <p>{{l.name}}</p>
                </router-link>
              </li>
            </div>
            <div class="classification-details-inner-a" id="mm" v-if="fuzzySearch.M.length != 0">
              <span>M</span>
              <li v-for="(l) in fuzzySearch.M" :key="l">
                <router-link
                  :to="`/knowledgeBase/medicationRecommendationslist/home/${l.id}`"
                  class="hover-change"
                >
                  <p>{{l.name}}</p>
                </router-link>
              </li>
            </div>
            <div class="classification-details-inner-a" id="nn" v-if="fuzzySearch.N.length != 0">
              <span>N</span>
              <li v-for="(l) in fuzzySearch.N" :key="l">
                <router-link
                  :to="`/knowledgeBase/medicationRecommendationslist/home/${l.id}`"
                  class="hover-change"
                >
                  <p>{{l.name}}</p>
                </router-link>
              </li>
            </div>
            <div class="classification-details-inner-a" id="oo" v-if="fuzzySearch.O.length != 0">
              <span>O</span>
              <li v-for="(l) in fuzzySearch.O" :key="l">
                <router-link
                  :to="`/knowledgeBase/medicationRecommendationslist/home/${l.id}`"
                  class="hover-change"
                >
                  <p>{{l.name}}</p>
                </router-link>
              </li>
            </div>
            <div class="classification-details-inner-a" id="pp" v-if="fuzzySearch.P.length != 0">
              <span>P</span>
              <li v-for="(l) in fuzzySearch.P" :key="l">
                <router-link
                  :to="`/knowledgeBase/medicationRecommendationslist/home/${l.id}`"
                  class="hover-change"
                >
                  <p>{{l.name}}</p>
                </router-link>
              </li>
            </div>
            <div class="classification-details-inner-a" id="qq" v-if="fuzzySearch.Q.length != 0">
              <span>Q</span>
              <li v-for="(l) in fuzzySearch.Q" :key="l">
                <router-link
                  :to="`/knowledgeBase/medicationRecommendationslist/home/${l.id}`"
                  class="hover-change"
                >
                  <p>{{l.name}}</p>
                </router-link>
              </li>
            </div>
            <div class="classification-details-inner-a" id="rr" v-if="fuzzySearch.R.length != 0">
              <span>R</span>
              <li v-for="(l) in fuzzySearch.R" :key="l">
                <router-link
                  :to="`/knowledgeBase/medicationRecommendationslist/home/${l.id}`"
                  class="hover-change"
                >
                  <p>{{l.name}}</p>
                </router-link>
              </li>
            </div>
            <div class="classification-details-inner-a" id="ss" v-if="fuzzySearch.S.length != 0">
              <span>S</span>
              <li v-for="(l) in fuzzySearch.S" :key="l">
                <router-link
                  :to="`/knowledgeBase/medicationRecommendationslist/home/${l.id}`"
                  class="hover-change"
                >
                  <p>{{l.name}}</p>
                </router-link>
              </li>
            </div>
            <div class="classification-details-inner-a" id="tt" v-if="fuzzySearch.T.length != 0">
              <span>T</span>
              <li v-for="(l) in fuzzySearch.T" :key="l">
                <router-link
                  :to="`/knowledgeBase/medicationRecommendationslist/home/${l.id}`"
                  class="hover-change"
                >
                  <p>{{l.name}}</p>
                </router-link>
              </li>
            </div>
            <div class="classification-details-inner-a" id="ww" v-if="fuzzySearch.W.length != 0">
              <span>W</span>
              <li v-for="(l) in fuzzySearch.W" :key="l">
                <router-link
                  :to="`/knowledgeBase/medicationRecommendationslist/home/${l.id}`"
                  class="hover-change"
                >
                  <p>{{l.name}}</p>
                </router-link>
              </li>
            </div>
            <div class="classification-details-inner-a" id="xx" v-if="fuzzySearch.X.length != 0">
              <span>X</span>
              <li v-for="(l) in fuzzySearch.X" :key="l">
                <router-link
                  :to="`/knowledgeBase/medicationRecommendationslist/home/${l.id}`"
                  class="hover-change"
                >
                  <p>{{l.name}}</p>
                </router-link>
              </li>
            </div>
            <div class="classification-details-inner-a" id="yy" v-if="fuzzySearch.Y.length != 0">
              <span>Y</span>
              <li v-for="(l) in fuzzySearch.Y" :key="l">
                <router-link
                  :to="`/knowledgeBase/medicationRecommendationslist/home/${l.id}`"
                  class="hover-change"
                >
                  <p>{{l.name}}</p>
                </router-link>
              </li>
            </div>
            <div class="classification-details-inner-a" id="zz" v-if="fuzzySearch.Z.length != 0">
              <span>Z</span>
              <li v-for="(l) in fuzzySearch.Z" :key="l">
                <router-link
                  :to="`/knowledgeBase/medicationRecommendationslist/home/${l.id}`"
                  class="hover-change"
                >
                  <p>{{l.name}}</p>
                </router-link>
              </li>
            </div>
          </div>
        </div>
        <company-profile />
        <div id="components-back-top-demo-custom">
          <a-back-top>
            <div class="ant-back-top-inner">
              <a-icon type="to-top" />
            </div>
          </a-back-top>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { httpAction } from '@/api/manage'
import pick from 'lodash.pick'
import moment from 'moment'
import { getAction } from '@/api/manage'
import { JeecgListMixin } from '@/mixins/zkxhKnowledge'
import CompanyProfile from '../knowlage/companyProfile'
import DiseaseKnowledgelist from '../knowlage/diseaseKnowledgelist'
import KnowTopnav from '../knowlage/knowtopnav'
import GlobalLayout from '@/components/page/GlobalLayout'
import Contextmenu from '@/components/menu/Contextmenu'
import { mixin, mixinDevice } from '@/utils/mixin.js'

const indexKey = '/dashboard/analysis'

export default {
  name: 'DepsettingModal',
  mixins: [JeecgListMixin],
  components: {
    CompanyProfile,
    DiseaseKnowledgelist,
    KnowTopnav,
    GlobalLayout,
    Contextmenu
  },
  //这是疾病知识页面
  data() {
    return {
      search: '',
      columns: [],
      searchAll: '',
      i: '',
      inneryes: true,
      detailSearchArr: [],
      enLetters: 'abcdefghjklmnopqrstwxyz',
      selectData: ['zhang', 'li'],
      // 请求参数
      url: {
        list: '/knowledge/knoCgOwner/getDepAll',
        listseach: '/knowledge/knoCgOwner/list',
        fuzzysearch: '/es/searchFull/getSearchDiseaseOrDrugsAll',
        getSearchSecondLeveList: '/es/searchFull/getSearchSecondLeveList',
        searchDetail: '/es/searchFull/getSearchSecondLeveList',
        querySearchList: '/knowledge/knoCgOwner/querySearchList'
      },
      options: [],
      value: [],
      list: [],
      loading: false,
      states: ['张洪亮'],
      pageList: [],
      linkList: [],
      activePage: '',
      menuVisible: false,
      menuItemList: [
        { key: '1', icon: 'arrow-left', text: '关闭左侧' },
        { key: '2', icon: 'arrow-right', text: '关闭右侧' },
        { key: '3', icon: 'close', text: '关闭其它' }
      ]
    }
  },
  created() {},
  computed: {},

  mounted() {
    this.list = this.states.map(item => {
      return { value: `${item}`, label: `${item}` }
    })
  },
  methods: {
    remoteMethod(query) {
      this.value = query
      getAction(this.url.querySearchList, { searchType: 1, filed: query }).then(res => {
        if (res.success) {
          let soon = []
          for (var i = 0; i < res.result.length; i++) {
            soon.push(res.result[i].disname)
          }
          this.states = soon
          this.list = this.states.map(item => {
            return { value: `${item}`, label: `${item}` }
          })
        }
        if (res.code === 510) {
          this.$message.warning(res.message)
        }
        this.loading = false
      })
      if (query !== '') {
        this.loading = true
        setTimeout(() => {
          this.loading = false
          this.options = this.list.filter(item => {
            return item.label.toLowerCase().indexOf(query.toLowerCase()) > -1
          })
        }, 200)
      } else {
        this.options = []
      }
    },

    missTime(e) {
      getAction(this.url.fuzzysearch, { searchName: e, searchType: 1 }).then(res => {
        if (res.success) {
          this.selectData = res.result
        }
        if (res.code === 510) {
          this.$message.warning(res.message)
        }
        this.loading = false
      })
    },

    searchOne(e) {
      if (this.value.length == 0) {
        getAction(this.url.fuzzysearch, { searchName: '科', searchType: 1 }).then(res => {
          if (res.success) {
            this.fuzzySearch = res.result
          }
          if (res.code === 510) {
            this.$message.warning(res.message)
          }
          this.loading = false
        })
      } else {
        getAction(this.url.fuzzysearch, { searchName: '"' + this.value + '"', searchType: 1 }).then(res => {
          if (res.success) {
            this.fuzzySearch = res.result
            this.value = ''
          }
          if (res.code === 510) {
            this.$message.warning(res.message)
          }
          this.loading = false
        })
      }
    },

    forSearch(e, index) {
      this.i = index
      getAction(this.url.fuzzysearch, { searchName: e, searchType: 1, feildType: 1 }).then(res => {
        if (res.success) {
          if (
            res.result.A.length != 0 ||
            res.result.B.length != 0 ||
            res.result.C.length != 0 ||
            res.result.D.length != 0 ||
            res.result.E.length != 0 ||
            res.result.F.length != 0 ||
            res.result.G.length != 0 ||
            res.result.H.length != 0 ||
            res.result.L.length != 0 ||
            res.result.J.length != 0 ||
            res.result.K.length != 0 ||
            res.result.M.length != 0 ||
            res.result.N.length != 0 ||
            res.result.O.length != 0 ||
            res.result.P.length != 0 ||
            res.result.Q.length != 0 ||
            res.result.R.length != 0 ||
            res.result.S.length != 0 ||
            res.result.T.length != 0 ||
            res.result.W.length != 0 ||
            res.result.X.length != 0 ||
            res.result.Y.length != 0 ||
            res.result.Z.length != 0
          ) {
            this.inneryes = true
            this.fuzzySearch = res.result
            document.querySelector('.knowledge-details').style.borderBottom = '1px dashed #ebeef5'
          } else {
            this.inneryes = false
            document.querySelector('.knowledge-details').style.borderBottom = '1px solid #ebeef5'
          }
        }
        if (res.code === 510) {
          this.$message.warning(res.message)
        }
        this.loading = false
      })
    },
    changePage(){
    
    }
  }
}
</script>

<style lang="less" scoped>
@import '~@assets/less/common.less';
@import '~@assets/less/knowledge.less';
.btn {
  border: none;
  background-color: #fff;
}
#components-back-top-demo-custom .ant-back-top {
  bottom: 100px;
}
#components-back-top-demo-custom .ant-back-top-inner {
  height: 40px;
  width: 40px;
  line-height: 36px;
  color: #ccc;
  text-align: center;
  font-size: 20px;
  border: 1px solid #ccc;
}
#components-back-top-demo-custom .ant-back-top-inner:hover {
  color: #aaa;
  border: 1px solid #aaa;
}
//input获取焦点，border专用
.inp:focus {
  border: 1px solid #38c3c8;
}
.inp:hover {
  border: 1px solid #38c3c8;
}
.inp::selection {
  background-color: #38c3c8;
  color: #fff;
}
.circle-cust {
  position: relative;
  top: 28px;
  left: -100%;
}
.extra-wrapper {
  line-height: 55px;
  padding-right: 24px;

  .extra-item {
    display: inline-block;
    margin-right: 24px;

    a {
      margin-left: 24px;
    }
  }
}

/* 首页访问量统计 */
.head-info {
  position: relative;
  text-align: left;
  padding: 0 32px 0 0;
  min-width: 125px;

  &.center {
    text-align: center;
    padding: 0 32px;
  }

  span {
    color: rgba(0, 0, 0, 0.45);
    display: inline-block;
    font-size: 0.95rem;
    line-height: 42px;
    margin-bottom: 4px;
  }
  p {
    line-height: 42px;
    margin: 0;
    a {
      font-weight: 600;
      font-size: 1rem;
    }
  }
}
.footer-name {
  margin: auto;
  text-align: center;
  margin-top: 80px;
}
.personsum {
  display: flex;

  a-button {
    padding-right: 100px;
  }
  p {
    margin-left: 20px;
    line-height: 2.4;
  }
}
.layout .header {
  background-color: #13c2c2 !important;
}
/deep/ .ant-carousel .slick-dots li button {
  width: 20px;
  height: 5px;
  background-color: #333333;
}
/deep/.ant-carousel .slick-dots li.slick-active button {
  background-color: #38c3c8;
}
</style>